<script setup>
import {Picker} from "emoji-picker-element"
import {defineProps, ref, onMounted, nextTick, onBeforeUnmount} from 'vue'
import EmojiFilled from "@/icons/EmojiFilled.vue"

const base = import.meta.env.VITE_BASE_PATH
const inputRef = ref(null)
const props = defineProps({
  placeholder: {
    type: String,
    default: '评论'
  },
  sendText: {
    type: String,
    default: '发送'
  },
  tableIndex: {
    type: Number,
    default: -1
  }
})

const commentText = ref('')
const emits = defineEmits(['send'])

const handleSend = () => {
  if (commentText.value.trim() === '') {
    return
  }
  const detail = commentText.value
  emits('send', detail)
  commentText.value = ''
}

const eventPicker = e => {
  const {textarea} = inputRef.value
  const index = textarea.selectionStart
  const {unicode} = e.detail
  commentText.value = commentText.value.substring(0, index) + unicode + commentText.value.substring(index)
  textarea.focus()
  nextTick(() => {
    const s_index = index + 2
    textarea.setSelectionRange(s_index, s_index)
  })
}

onMounted(async () => {
  await nextTick()
  const div = document.getElementById(`emoji-picker-${props.tableIndex}`)
  const picker = new Picker({
    dataSource: base + '/emoji-data.json'
  })
  div.appendChild(picker)
  await nextTick()
  div.addEventListener('emoji-click', eventPicker)
  if (props.tableIndex !== -1) {
    const {focus} = inputRef.value
    focus()
  }
})

onBeforeUnmount(() => {
  const div = document.getElementById(`emoji-picker-${props.tableIndex}`)
  div.removeEventListener('emoji-click', eventPicker)
})

</script>

<template>
  <div class="input-section">
    <div class="input-box">
      <el-input
          ref="inputRef"
          type="textarea"
          :autosize="{minRows: 1, maxRows: 3}"
          :placeholder="placeholder"
          v-model="commentText"
          resize="none"
          maxlength="500"
          show-word-limit
      />
      <el-popover
          :width="370"
          placement="bottom-end"
          trigger="click"
          append-to="body"
          :teleported="false"
          :tabindex="tableIndex"
      >
        <template #default>
          <div :id="`emoji-picker-${tableIndex}`"></div>
        </template>
        <template #reference>
          <el-icon class="icon" @click="() => inputRef.focus()">
            <EmojiFilled/>
          </el-icon>
        </template>
      </el-popover>
    </div>
    <el-button class="btn" type="primary" @click="handleSend">{{ sendText }}</el-button>
  </div>
</template>

<style scoped lang="scss">
.input-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;

  .input-box {
    border: var(--el-border);
    border-radius: var(--el-border-radius-base);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 3px 0;

    .icon {
      font-size: 24px;
      margin: 0 5px 0 0;
      color: #AFAFAF;
      cursor: pointer;
    }
  }
}

:deep(.el-textarea__inner) {
  box-shadow: none;
  padding-top: 1px;
  padding-bottom: 0;
}

:deep(.search-row) {
  display: none;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
</style>